<template>
  <el-table
    :load="state.loading"
    :data="state.tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <slot name="column"></slot>
  </el-table>
  <el-pagination
    background
    layout="prev, pager, next"
    :total="state.total"
    :page-size="state.pageSize"
    :current-page="state.currentPage"
    @current-change="changePage"
  />
</template>

<script setup>
import { onMounted, reactive } from "vue";
import axios from "@/utils/axios";

const props = defineProps({
  action: String,
});
const state = reactive({
  loading: false,
  tableData: [], // 数据列表
  total: 0, // 总条数
  currentPage: 1, // 当前页
  pageSize: 10, // 分页大小
  multipleSelection: [], // 多选框
});
// 初始化钩子函数
onMounted(() => {
  // getList();
});
// 获取列表方法
const getList = () => {
  state.loading = true;
  axios
    .get(props.action, {
      params: {
        pageNumber: state.currentPage,
        pageSize: state.pageSize,
      },
    })
    .then((res) => {
      state.tableData = res.list;
      state.total = res.totalCount;
      state.currentPage = res.currPage;
      state.loading = false;
    });
};
// 选项
const handleSelectionChange = (val) => {
  state.multipleSelection = val;
};
// 分页方法
const changePage = (val) => {
  state.currentPage = val;
  getList();
};
// script setup 写法，需要通过 defineExpose 方法，将属性暴露出去，才能在父组件通过 ref 形式拿到本组件的内部参数
defineExpose({ state: state, getList: getList });
</script>

<style scoped></style>
